<template>
  <div class="body">
    <el-form class="search-form" />
    <el-table
      :data="dataList"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="商品信息"
        width="400"
      >
        <template #default="scope">
          <div class="product">
            <img
              class="product-img"
              :src="scope.row.productPicture"
            >
            <div class="product-info">
              <div class="product-name">{{ scope.row.productName }}</div>
              <div class="product-price">￥{{ scope.row.productPrice }}</div>
              <div class="product-desc">{{ scope.row.productDesc }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-input-number
            v-model="scope.row.productNumber"
            @change="updateNumber(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
      >
        <template #default="scope">
          <el-button
            type="danger"
            @click="deleteHandle(scope.row.shoppingCartId)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="totalPrice">￥{{ totalPrice }}</div>
    <el-button type="danger" style="margin:10px 20px;" @click="goOrderDetail">立即下单</el-button>
    <el-button type="primary" style="margin:10px 20px;" @click="goProduct">去购物</el-button>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="total"
      :current-page="pageNum"
      style="margin-top:15px"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { getUserCartPage, deleteCartById, updateCartById } from '@/api/mall/cart'
export default {
  data() {
    return {
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        flag: '',
        originPlace: '',
        name: ''
      },
      seleteList: [],
      totalPrice: 0
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      this.$getUserId().then(async(userId) => {
        const res = await getUserCartPage({
          userId: userId,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        this.dataList = res.data.records
        this.total = res.data.total
        console.log(this.dataList)
      })
    },
    pageChange(page) {
      this.pageNum = page
      this.load()
    },
    pageSizeChange(size) {
      this.pageSize = size
      this.load()
    },
    handleSelectionChange(rows) {
      this.seleteList = rows
      this.updateTotalPrice()
    },
    deleteHandle(id) {
      this.$confirm(
        `确定要删除吗？`,
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        deleteCartById(id).then(() => {
          this.load()
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }).catch(() => {
          this.$message({
            type: 'danger',
            message: '操作失败'
          })
        })
      }).catch(() => { })
    },
    updateNumber(cart) {
      updateCartById(cart)
      this.updateTotalPrice()
    },
    updateTotalPrice() {
      this.totalPrice = 0
      this.seleteList.forEach(item => {
        this.totalPrice += Number(item.productNumber * item.productPrice)
        this.totalPrice = Number(this.totalPrice.toFixed(2))
      })
    },
    goOrderDetail() {
      if (this.seleteList.length == 0) {
        this.$message({
          message: '请选择商品',
          type: 'error'
        })
        return
      }
      this.$router.push({ name: 'orderDetail', params: { type: 2, productList: JSON.stringify(this.seleteList) }})
    },
    goProduct() {
      this.$router.push('/receptionProduct')
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 160%;
}

.search-form {
  margin: 10px 0;
  padding: 0 10px;
  display: flex;
  .el-form-item {
    margin-right: 20px;
  }
}
.operations {
  padding: 0 10px;
}

.product {
  display: flex;
  .product-img {
    width: 120px;
    height: 100px;
    object-fit: cover;
    margin-right: 5px;
  }

  .product-info {
    width: 300px;

    .product-name {
      font-weight: bold;
    }

    .product-price {
      color: red;
    }

    .product-desc {
      white-space: nowrap;

      text-overflow: ellipsis;

      overflow: hidden;
    }
  }
}

.totalPrice{
  color:red;
  font-size: 22px;
  margin:10px 20px;
}
</style>
